<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">导入菜单</text>
		</view>
		
		<!-- 手动添加区域（默认显示） -->
		<view class="import-section">
			<view class="section-title">
				<text>手动添加</text>
			</view>
			
			<view class="import-tabs">
				<view 
					class="tab-item" 
					:class="{ active: currentTab === 'category' }"
					@click="switchTab('category')"
				>
					分类
				</view>
				<view 
					class="tab-item" 
					:class="{ active: currentTab === 'dish' }"
					@click="switchTab('dish')"
				>
					菜品
				</view>
			</view>
			
			<view class="tab-content">
				<!-- 分类添加 -->
				<view v-if="currentTab === 'category'" class="category-form">
					<input 
						type="text" 
						placeholder="分类名称" 
						class="form-input"
						v-model="newCategory.name"
					/>
					<input 
						type="text" 
						placeholder="分类描述（可选）" 
						class="form-input"
						v-model="newCategory.description"
					/>
					<button class="add-btn" @click="addCategory">添加分类</button>
				</view>
				
				<!-- 菜品添加 -->
				<view v-if="currentTab === 'dish'" class="dish-form">
					<input 
						type="text" 
						placeholder="菜品名称" 
						class="form-input"
						v-model="newDish.name"
					/>
					<input 
						type="digit" 
						placeholder="价格" 
						class="form-input"
						v-model="newDish.price"
					/>
					<textarea 
						placeholder="菜品描述" 
						class="form-textarea"
						v-model="newDish.description"
					/>
					
					<!-- 分类选择 -->
					<view class="form-group">
						<text class="form-label">所属分类</text>
						<picker 
							mode="selector" 
							:range="categories" 
							range-key="name"
							@change="onCategoryChange"
						>
							<view class="picker-input">
								<text v-if="selectedCategory">{{ selectedCategory.name }}</text>
								<text v-else class="placeholder">请选择分类</text>
							</view>
						</picker>
					</view>
					
					<!-- 图片上传 -->
					<view class="form-group">
						<text class="form-label">菜品图片</text>
						<view class="image-upload">
							<view class="upload-preview" v-if="dishImage">
								<image :src="dishImage" class="preview-image" mode="aspectFill"></image>
								<text class="remove-image" @click="removeImage">×</text>
							</view>
							<view class="upload-btn" v-else @click="uploadImage">
								<text class="upload-icon">+</text>
								<text class="upload-text">上传图片</text>
							</view>
						</view>
					</view>
					
					<button class="add-btn" @click="addDish">添加菜品</button>
				</view>
			</view>
		</view>
		
		<!-- 导入进度 -->
		<view class="import-progress" v-if="showProgress">
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: progress + '%' }"></view>
			</view>
			<text class="progress-text">{{ progress }}%</text>
		</view>
	</view>
</template>

<script>
	import config from '../../config/api.js';
	
	export default {
		data() {
			return {
				currentTab: 'category', // 当前标签页（默认为分类）
				showProgress: false,
				progress: 0,
				dishImage: '', // 菜品图片
				
				// 分类数据，初始化为空，页面加载时通过API获取
				categories: [],
				selectedCategory: null,
				
				// 新分类数据
				newCategory: {
					name: '',
					description: ''
				},
				
				// 新菜品数据
				newDish: {
					name: '',
					price: '',
					description: '',
					categoryId: null
				}
			}
		},
		// 页面加载时获取分类数据
		mounted() {
			this.loadCategories();
		},
		methods: {
			// 切换标签页
			switchTab(tab) {
				this.currentTab = tab;
			},
			
			// 分类选择变化
			onCategoryChange(e) {
				const index = e.detail.value;
				this.selectedCategory = this.categories[index];
				this.newDish.categoryId = this.selectedCategory.id;
			},
			
			// 上传图片
			uploadImage() {
				// 模拟图片上传
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.dishImage = res.tempFilePaths[0];
						uni.showToast({
							title: '图片上传成功',
							icon: 'success'
						});
					},
					fail: () => {
						// 模拟网络图片
						this.dishImage = '/static/logo.png';
						uni.showToast({
							title: '使用默认图片',
							icon: 'none'
						});
					}
				});
			},
			
			// 移除图片
			removeImage() {
				this.dishImage = '';
			},
			
			// 新增菜品分类
			async addCategory() {
				if (this.newCategory.name) {
					try {
						const res = await uni.request({
							url: config.baseUrl + config.api.dishCategories,
							method: 'POST',
							data: {
								name: this.newCategory.name,
								description: this.newCategory.description
							}
						});
						
						console.log(res);
						
						if (res.statusCode === 200 || res.statusCode === 201) {
							uni.showToast({ title: '添加分类成功', icon: 'success' });
							this.newCategory = { name: '', description: '' };
							// 可选：刷新分类列表
						} else {
							uni.showToast({ title: '添加分类失败', icon: 'none' });
						}
					} catch (e) {
						uni.showToast({ title: '网络错误', icon: 'none' });
					}
				} else {
					uni.showToast({ title: '请输入分类名称', icon: 'none' });
				}
			},

			// 新增菜品
			async addDish() {
				if (this.newDish.name && this.newDish.price && this.newDish.categoryId) {
					try {
						const res = await uni.request({
							url: config.baseUrl + config.api.dishList,
							method: 'POST',
							data: {
								name: this.newDish.name,
								price: this.newDish.price,
								description: this.newDish.description,
								categoryId: this.newDish.categoryId,
								image: this.dishImage // 图片路径
							}
						});
						if (res.statusCode === 200 || res.statusCode === 201) {
							uni.showToast({ title: '添加菜品成功', icon: 'success' });
							this.newDish = { name: '', price: '', description: '', categoryId: null };
							this.selectedCategory = null;
							this.dishImage = '';
							// 可选：刷新菜品列表
						} else {
							uni.showToast({ title: '添加菜品失败', icon: 'none' });
						}
					} catch (e) {
						uni.showToast({ title: '网络错误', icon: 'none' });
					}
				} else {
					uni.showToast({ title: '请填写完整信息', icon: 'none' });
				}
			},
			
			// 获取分类数据
			async loadCategories() {
				try {
					const res = await uni.request({
						url: config.baseUrl + config.api.dishCategories,
						method: 'GET'
					});
					if (res.statusCode === 200 && res.data && Array.isArray(res.data.data.categories)) {
						this.categories = res.data.data.categories;
					} else {
						uni.showToast({ title: '分类获取失败', icon: 'none' });
					}
				} catch (e) {
					uni.showToast({ title: '网络错误', icon: 'none' });
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
	}
	
	.page-header {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.import-section {
		background-color: white;
		border-radius: 10rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.import-tabs {
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 30rpx;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx;
		font-size: 30rpx;
		color: #666;
	}
	
	.tab-item.active {
		color: #007AFF;
		border-bottom: 4rpx solid #007AFF;
	}
	
	.form-input {
		height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	
	.form-textarea {
		height: 150rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	
	.form-group {
		margin-bottom: 20rpx;
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}
	
	.picker-input {
		height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}
	
	.placeholder {
		color: #999;
	}
	
	.image-upload {
		margin-top: 15rpx;
	}
	
	.upload-preview {
		position: relative;
		width: 200rpx;
		height: 200rpx;
	}
	
	.preview-image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	
	.remove-image {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		background-color: #ff4d4f;
		color: white;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	
	.upload-btn {
		border: 2rpx dashed #007AFF;
		border-radius: 10rpx;
		padding: 30rpx;
		text-align: center;
	}
	
	.upload-icon {
		font-size: 50rpx;
		color: #007AFF;
		display: block;
	}
	
	.upload-text {
		font-size: 28rpx;
		color: #007AFF;
	}
	
	.add-btn {
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 10rpx;
		height: 80rpx;
		font-size: 32rpx;
		width: 100%;
		margin-top: 20rpx;
	}
	
	.import-progress {
		margin-top: 30rpx;
		text-align: center;
	}
	
	.progress-bar {
		height: 20rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	
	.progress-fill {
		height: 100%;
		background-color: #007AFF;
		transition: width 0.3s;
	}
	
	.progress-text {
		font-size: 28rpx;
		color: #666;
	}
</style>